<template>
	<view class="avatar-popup">
		<u-popup
			v-model="show"
			mode="center"
      :closeable="false"
			border-radius="16"
			width="600"
			@close="close">
			<view class="popup-content1">
				<view class="title">{{ infoData.title }}</view>
        <image
          :src="infoData.qrcode"
          mode="scaleToFill"
          class="qrcode"
        />
        <view v-if="infoData.wechatNumber" class="wechat-number title">微信号：{{ infoData.wechatNumber }}</view>
        <view class="btn-container">
          <u-button class="btn" plain hover-class="none" @click="show = false">关闭</u-button>
          <u-button
            v-if="infoData.wechatNumber"
            class="btn"
            type="primary"
            hover-class="none"
            :custom-style="{
              backgroundColor: '#56d39d'
            }"
            @click="setClipboardData(infoData.wechatNumber)">复制微信号</u-button>
        </view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		props: {
			'popupShow': {
				default: false,
			},
			'info': {
				type: Object,
				default: () => {
          return {}
        }
			}
		},
		data(){
			return{
				show: this.popupShow,
				infoData: null,
			}
		},
		watch: {
			popupShow: {
				immediate: true,
				handler(val, oldValue) {
					this.show = val;
				}
			},
      info: {
				immediate: true,
				handler(val, oldValue) {
					this.infoData = val;
				}
			}
		},
		methods: {
			close(){
				this.$emit('close', false);
			},

      // 设置剪切板
      setClipboardData(txt) {
        uni.setClipboardData({
          data: txt,
          success: function () {
            uni.showToast({
              title: '复制成功',
              icon: 'none',
              mask: false
            })
          }
        });
      },
		}
	}
</script>
<style lang="scss" scoped>
	.popup-content1{
		padding: 32rpx;
		background-color: #fff;
		color: #fff;
    position: relative;
    text-align: center;

    .title{
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 24rpx;
    }

    .qrcode{
      width: 420rpx;
      height: 420rpx;
      margin-bottom: 24rpx;
    }

    .wechat-number{
      color: #4b4b5c;
    }

    .btn-container{
			display: flex;
			padding-top: 32rpx;
			justify-content: space-between;

			.btn{
				flex: 1;
			}
			.btn:nth-child(2){
				margin-left: 24rpx;
			}
		}
	}
</style>
